<template>
  <div>
    <!-- 顶部搜索 -->
    <div class="baseDiv">
      <div class="baseDivInner">

            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
              size="mini"
              ref="inLineForm"
              @submit.native.prevent="innerSearch"
            >
              <el-form-item label="用户名" prop="username">
                <el-input v-model="formInline.username" placeholder="用户名" clearable></el-input>
              </el-form-item>
              <el-form-item label="昵称" prop="nickname">
                <el-input v-model="formInline.nickname" placeholder="昵称" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="innerSearch">查询</el-button>
                <el-button type="info" @click="clearInnerForm">清空</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button type="primary" @click="handleCreate">新建用户</el-button>
                <el-button type="danger" @click="handleDelList">批量删除</el-button>
              </el-form-item>
            </el-form>

      </div>
    </div>

    <!-- 数据列表 -->
    <div class="baseDiv" style="height: 640px">
      <el-table
        ref="multipleTable"
        :data="this.tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        max-height="640"
        size="small"
        @sort-change="handleSortChange"
      >
        <el-table-column type="selection" width="55" header-align="center" align="center"></el-table-column>

        <el-table-column prop="id" v-if="false"></el-table-column>

        <el-table-column label="序号" type="index" width="50" header-align="center" align="center"></el-table-column>

        <el-table-column prop="username" label="用户名" header-align="center" align="center"></el-table-column>

        <el-table-column prop="nickname" label="昵称" header-align="center" align="center" show-overflow-tooltip></el-table-column>

        <el-table-column prop="code" label="用户编码" header-align="center" align="center"></el-table-column>

        <el-table-column label="状态" header-align="center" align="center">
          <template slot-scope="scope">
            {{ scope.row.status ? '启用' : '未启用' }}
          </template>
        </el-table-column>

        <el-table-column prop="updateTime" label="修改时间" header-align="center" align="center" sortable="custom"></el-table-column>

        <el-table-column prop="role" label="角色" header-align="center" align="center" sortable="custom"></el-table-column>

        <el-table-column label="操作" header-align="center" align="center">
          <template slot-scope="scope">
            <el-button size="mini" icon="el-icon-view" type="text" @click="handleView(scope.$index, scope.row)">查看</el-button>
            <el-button size="mini" icon="el-icon-edit" type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" icon="el-icon-delete" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>

    <!-- 底部翻页 -->
    <div class="baseDiv">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[15, 30, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <!-- 卡片 -->
    <card
      :visible="dialogVisible"
      :mode="dialogMode"
      :row-data="currentRow"
      @update:visible="dialogVisible = $event"
      @refresh="handleRefresh"
    ></card>
  </div>
</template>

<script>
import card from "@/views/admin/user/UserCard";
import {getUserList,delUserList} from "@/api/user";

export default {
  components: {
    card,
  },
  data() {
    return {
      // 卡片传参
      dialogVisible: false,
      dialogMode: "create",
      currentRow: null,
      // 查询区域
      formInline: {
        username:'',
        nickname:''
      },
      // 表体数据
      tableData: [],
      // 分页信息
      currentPage: 1,
      pageSize: 15,
      total: 0,
      // 表体勾选
      multipleSelection: [],
      // 排序
      sortProp: "updateTime",
      sortOrder: "descending"
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    // 查询区方法
    innerSearch(){
      this.currentPage=1;
      this.search();
    },
    clearInnerForm(){
      this.$refs.inLineForm.resetFields();
      this.currentPage=1;
      this.search();
    },
    handleCreate() {
      this.dialogMode = "create";
      this.currentRow = {
        username:'',
        nickname:'',
        code:'',
        role:'',
        status:false,
        createTime:'',
        updateTime:''
      };
      this.dialogVisible = true;
    },
    handleDelList(){
      if(this.multipleSelection.length === 0){
        this.$message({
          message: '请勾选数据行',
          type: 'warning'
        });
        return;
      }
      const idArray = this.multipleSelection.map(item => item.id);
      this.delete(idArray);
    },
    // 表体区方法
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleView(index, row) {
      this.dialogMode = "view";
      this.currentRow = this.tableData.find(item => item.id === row.id);
      this.dialogVisible = true;
    },
    handleEdit(index, row) {
      this.dialogMode = "edit";
      this.currentRow = this.tableData.find(item => item.id === row.id);
      this.dialogVisible = true;
    },
    handleDelete(index, row) {
      this.delete([row.id]);
    },
    handleSortChange({ prop, order }) {
      this.sortProp = order ? prop : null;
      this.sortOrder = order;
      this.search();
    },
    // 分页区方法
    handleSizeChange(val) {
      this.pageSize = val;
      this.search();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.search();
    },
    // 对话框
    handleRefresh(isRefresh){
      if(isRefresh){
        this.search();
      }
    },
    // 公共方法
    search() {
      try {
        getUserList({ 
            pageNum: this.currentPage,
            pageSize: this.pageSize,
            sortField: this.sortProp,
            sortOrder: this.sortOrder,
            username:this.formInline.username,
            nickname:this.formInline.nickname 
          }).then((res) => {
            if(res.code == 0){
              this.tableData = res.data.records;
              this.total = res.data.total;
            }else{
              this.$message.error("数据查询失败");
              console.log(res);
            }
          });
      } catch (error) {
        console.error('查询失败', error)
      }
    },
    delete(idArr){
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        try{
          delUserList(idArr).then((res) => {
            if(res.code == 0){
              this.$message.success("删除成功");
              this.search();
            }else{
              this.$message.error("删除失败:"+res.message);
              console.log('删除失败:',res);
            }
          });
        }catch(error){
          console.error('删除失败', error)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    }
  },
};
</script>

<style scoped>
.baseDiv {
  padding: 10px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 12px #ebedf0;
  /* margin-top: 12px; */
  margin-bottom: 12px;
  margin-left: 10px;
  margin-right: 10px;
}

.baseDivInner {
  position: relative;
  display: block;
  padding: 10px;
  color: #58727e;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  background-color: #fafafa;
  border-radius: 16px;
  margin-top: 5px;
  margin-bottom: 5px;
}
</style>
